<template>
	<view class="content">
		<view class="section-0">
			<view class="section-body">
				<view class="problem-wrapper" v-show="list.length < 1">
					<image src="https://www.mescroll.com/img/mescroll-empty.png"></image>
					<view class="">~ 空空如也 ~</view>
				</view>
				<view class="all_read" @click="read()" v-show="list.length > 0">
					<image src="../../../src/imgs/eliminate.png"  />
					全部已读
				</view>
				<view v-for="(item, index) in list" :key="index" @click="go(item)" :class="`item ${item.is_read === 1 ? 'item__active' : ''}`">
					<view class="title">
						<view class="name">
							<view :class="`diandiandian ${item.is_read === 1 ? 'item__diandiandian' : ''}`"></view>
							{{ item.title }}
						</view>
						<view class="name">
							{{ item.create_time ? item.create_time.substring(0, 10) : '-' }}
						</view>
					</view>
					<view class="stile">
						{{ item.msg }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex'
import {UserMsgListApi,UserMsgReadApi } from '@/api/statistics.js'
export default {
	computed: {
		...mapGetters({ userInfo: 'system/getUserInfo' })
	},
	data() {
		return {
			list: [],
			id:'',
			id2:''
		}
	},
	methods: {
		go(item) {
			uni.navigateTo({
				url: '/pages/statistics/mail/messageDetails?id='+ encodeURIComponent(JSON.stringify(item.id))
			})
		},
		// 更改状态
		UserMsgListApi(){
			let obj ={}
			obj = {
				uid: this.userInfo.user_id,
				select_is_read: 0
			}
			UserMsgListApi({...obj}).then(res=>{
				// #ifdef APP-PLUS
				if (res.data.data.push == 1) {
					plus.push.clear()
					uni.getSystemInfo({
						success(list) {
							if (list.brand == 'Xiaomi') {
								plus.runtime.setBadgeNumber(res.data.data.total_unread - 1)
							} else {
								plus.runtime.setBadgeNumber(res.data.data.total_unread)
							}
						}
					})
				}
				// #endif
			})
		},
		// 全部已读
		read(){
			let obj={}
			obj = {
				uid:this.userInfo.user_id,
				id: this.id,
				status: 1,
			}
			UserMsgReadApi({...obj}).then(res=>{
				this.getErrorLogDataFun()
				this.UserMsgListApi()
			})
		},
		read2(){
			let obj={}
			obj = {
				uid:this.userInfo.user_id,
				id2: this.id,
				status: 2,
			}
			UserMsgReadApi({...obj}).then(res=>{
				
			})
		},
		// 查询消息
		getErrorLogDataFun() {
			let obj = {}
			obj = {
				uid: this.userInfo.user_id,
				select_is_read: 2,
				pageSize:10000
			}
			UserMsgListApi({...obj}).then(res=>{
				this.list=res.data.data.data
				this.id=res.data.data.data.map((obj)=>{
					return  obj.id 
				}).join(",")
			 this.id2=res.data.data.data.map((obj)=>{
				 if(obj.is_read===0){
					 return  obj.id 
				 }
				
			}).join(",")
				this.read2()
				})
		},
	},
	onShow(){
		this.getErrorLogDataFun()
	},
	// onBackPress() {
	// 	uni.navigateTo({
	// 			url: '/pages/statistics/index'
	// 		})
	// 		return true
	// }
}
</script>

<style lang="scss" scoped>
.custom-button {
	margin-top: 70rpx;
	box-shadow: 0rpx 13rpx 35rpx 0rpx rgba(60, 90, 214, 0.42);
}
.section-0 {
	width: 100%;
	background-color: #3a5df5;
	.section-body {
		padding-top: 50rpx;
		box-sizing: border-box;
		width: 100%;
		padding-left: 40rpx;
		padding-right: 40rpx;
		padding-bottom: 50rpx;
		background-color: #fff;
		background-size: cover;
		background-repeat: no-repeat;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		.all_read {
			font-size: 30rpx;
			color: #a4a4a4;
			margin-bottom: 50rpx;
			image{
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
			}
		}
		.item {
			color: black;
			.title {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				.name:first-child {
					font-size: 30rpx;
					font-weight: bold;
					display: flex;
					.diandiandian{
						margin-top: 20rpx;
						margin-right: 10rpx;
						width: 10rpx;
						height: 10rpx;
						background-color: red;
						border-radius: 50%;
					}
					.item__diandiandian{
						background-color: #E4E4E4;
					}
				}
				.name {
					font-size: 30rpx;
				}
			}
			.stile {
				font-size: 26rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				padding-bottom: 30rpx;
				margin-bottom: 20rpx;
				border-bottom: 2rpx solid #E4E4E4;
			}
		}
		.item__active {
			color: #E4E4E4;
		}

		// 没数据
		.problem-wrapper {
			color: #E4E4E4;
			margin: 0 auto;
			text-align: center;
			image {
				margin-top: 300rpx;
				width: 200rpx;
				height: 200rpx;
			}
		}
	}
}
</style>
